<template>
  <div>
    <div class="footer_wrap">
      <router-link tag="div" to="/login?name=黑马">登录</router-link>
      <router-link tag="span" to="/enroll">注册</router-link>
      <router-link to="/essay">文章</router-link>
      <router-link to="/list">列表</router-link>
      <hr />*
    </div>
    <div class="top">
      <!-- 指定一个路由出口，告诉vue当路由命中的时候，对应的组件展示在什么 -->
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {}
</script>

<style scoped>
/* .footer_wrap a:focus {
  color: red;
} */
.router-link-exact-active {
  color: red;
}
</style>
